<template>
    <view class="container">
        <view>
            <!-- Tabs Section -->
            <up-tabs
                    class="up-tabs-content"
                    :list="carsDataDetails"
                    @click="onTabClick"
                    :lineWidth="lineWidth"
                    lineColor="#2877FF"
                    :activeStyle="activeTabStyle"
                    :inactiveStyle="inactiveTabStyle"
                    itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
            />

            <!-- Tab Content -->
            <view v-if="activeTab === 'item1'">

            </view>
            <view v-if="activeTab === 'item2'">
                <u-form class="form-content">
                    <u-form-item label="检查名称" class="form-item" label-width="120">
                        <u-input
                                placeholder="请输入检查名称"
                                class="custom-input"
                        />
                    </u-form-item>
                    <u-form-item label="状态" class="form-item" label-width="120">
                        <u-input
                                placeholder="请选择状态"
                                @click="changeOpenStatePicker"
                                class="custom-input"
                        />
                        <area-picker
                                ref="statePicker"
                                :title="statetitle"
                                titleColor="#808080"
                                titleFontSize="14px"
                                cancelType="icon"
                                cancelColor="#999999"
                                cancleFontSize="28rpx"
                                confirmColor="#2877FF"
                                confirmFontSize="14px"
                                confirmFontWeight="500"
                                itemFontSize="14px"
                                @onClose="closeStatePicker"
                                @onConfirm="confirmStatePicker"
                                :pickerList="listState"
                        />
                    </u-form-item>
                    <u-form-item label="开始时间" class="form-item" label-width="120">
                        <up-datetime-picker
                                hasInput
                                :show="show"
                                placeholder="请选择开始时间"
                                mode="date"
                        ></up-datetime-picker>
                        <u-icon
                                name="arrow-right"
                                size="16"
                                class="arrow-icon"
                        />
                    </u-form-item>
                    <u-form-item label="结束时间" class="form-item" label-width="120">
                        <up-datetime-picker
                                hasInput
                                :show="show"
                                placeholder="请选择结束时间"
                                mode="date"
                        ></up-datetime-picker>
                        <u-icon
                                name="arrow-right"
                                size="16"
                                class="arrow-icon"
                        />
                    </u-form-item>
                </u-form>
            </view>
            <view v-if="activeTab === 'item3'">
                <u-form class="form-content">
                    <u-form-item label="检查名称" class="form-item" label-width="120">
                        <u-input
                                placeholder="请输入检查名称"
                                class="custom-input"
                        />
                    </u-form-item>
                    <u-form-item label="开始时间" class="form-item" label-width="120">
                        <up-datetime-picker
                                hasInput
                                :show="show"
                                placeholder="请选择开始时间"
                                mode="date"
                        ></up-datetime-picker>
                        <u-icon
                                name="arrow-right"
                                size="16"
                                class="arrow-icon"
                        />
                    </u-form-item>
                    <u-form-item label="结束时间" class="form-item" label-width="120">
                        <up-datetime-picker
                                hasInput
                                :show="show"
                                placeholder="请选择结束时间"
                                mode="date"
                        ></up-datetime-picker>
                        <u-icon
                                name="arrow-right"
                                size="16"
                                class="arrow-icon"
                        />
                    </u-form-item>
                </u-form>
            </view>
            <view v-if="activeTab === 'item4'">
                <u-form class="form-content">
                    <u-form-item label="档案号" class="form-item" label-width="120">
                        <u-input
                                placeholder="请输入档案号"
                                class="custom-input"
                        />
                    </u-form-item>
                    <u-form-item label="检查名称" class="form-item" label-width="120">
                        <u-input
                                placeholder="请输入检查名称"
                                class="custom-input"
                        />
                    </u-form-item>
                    <u-form-item label="检查对象" class="form-item" label-width="120">
                        <u-input
                                placeholder="请输入检查对象"
                                class="custom-input"
                        />
                    </u-form-item>
                    <u-form-item label="开始时间" class="form-item" label-width="120">
                        <up-datetime-picker
                                hasInput
                                :show="show"
                                placeholder="请选择开始时间"
                                mode="date"
                        ></up-datetime-picker>
                        <u-icon
                                name="arrow-right"
                                size="16"
                                class="arrow-icon"
                        />
                    </u-form-item>
                    <u-form-item label="结束时间" class="form-item" label-width="120">
                        <up-datetime-picker
                                hasInput
                                :show="show"
                                placeholder="请选择结束时间"
                                mode="date"
                        ></up-datetime-picker>
                        <u-icon
                                name="arrow-right"
                                size="16"
                                class="arrow-icon"
                        />
                    </u-form-item>
                </u-form>
            </view>
            <view v-if="activeTab === 'item5'">
                <u-form class="form-content">
                    <u-form-item label="管辖机构" class="form-item" label-width="120">
                        <u-input
                                placeholder="请选择管辖机构"
                                @click="changeOpenTypePicker"
                                class="custom-input"
                        />
                        <area-picker
                                ref="typePicker"
                                :title="typetitle"
                                titleColor="#808080"
                                titleFontSize="14px"
                                cancelType="icon"
                                cancelColor="#999999"
                                cancleFontSize="28rpx"
                                confirmColor="#2877FF"
                                confirmFontSize="14px"
                                confirmFontWeight="500"
                                itemFontSize="14px"
                                @onClose="closeTypePicker"
                                @onConfirm="confirmTypePicker"
                                :pickerList="listType"
                        />
                    </u-form-item>
                    <u-form-item label="行业类别" class="form-item" label-width="120">
                        <u-input
                                placeholder="请选择行业类别"
                                @click="changeOpenTypePicker"
                                class="custom-input"
                        />
                        <area-picker
                                ref="typePicker"
                                :title="typetitle"
                                titleColor="#808080"
                                titleFontSize="14px"
                                cancelType="icon"
                                cancelColor="#999999"
                                cancleFontSize="28rpx"
                                confirmColor="#2877FF"
                                confirmFontSize="14px"
                                confirmFontWeight="500"
                                itemFontSize="14px"
                                @onClose="closeTypePicker"
                                @onConfirm="confirmTypePicker"
                                :pickerList="listType"
                        />
                    </u-form-item>
                    <u-form-item label="抽查名称" class="form-item" label-width="120">
                        <u-input
                                placeholder="请输入抽查名称"
                                class="custom-input"
                        />
                    </u-form-item>
                    <u-form-item label="档案号" class="form-item" label-width="120">
                        <u-input
                                placeholder="请输入档案号"
                                class="custom-input"
                        />
                    </u-form-item>
                </u-form>
            </view>
        </view>
        <view class="btn-container">
            <u-button @click="submitForm">立即查询</u-button>
        </view>
    </view>
</template>

<script>
  import areaPicker from "@/components/area-picker/area-picker.vue";
  import {getInspectState, changeTrans, vehiChangeProname} from "@/common/util_complete.js";

  export default {
    data() {
      return {
        listState: [], // 行政区划选择
        listType: [], // 行政区划选择
        statetitle: "选择状态",
        typetitle: "选择行业类别",
        carsDataDetails: [
          {name: "待办事宜", id: "item1"},
          {name: "检查任务", id: "item2"},
          {name: "消息推送", id: "item3"},
          {name: "办理记录", id: "item4"},
          {name: "双随机抽查", id: "item5"},
        ],
        activeTab: "item1", // 默认显示车辆信息
        lineColor: "#2877FF", // Tab 下划线颜色
      };
    },
    onLoad(options) {
      this.listState = getInspectState(this.listState);
      this.listType = changeTrans(this.listType);
    },
    mounted() {
    },
    computed: {
      lineWidth() {
        return this.calculateTextWidth(this.activeTab);
      },
      activeTabStyle() {
        return {
          color: "#2877FF",
          fontWeight: "bold",
          transform: "scale(1.05)",
        };
      },
      inactiveTabStyle() {
        return {
          color: "#606266",
          transform: "scale(1)",
        };
      },
    },
    methods: {
      confirmStatePicker(checkedValue) {
        this.formData.region = checkedValue;
      },
      closeStatePicker() {
        this.$refs.statePicker._close();
      },
      // 打开行政区划选择器
      changeOpenStatePicker() {
        this.$refs.statePicker._open();
      },
      confirmTypePicker(checkedValue) {
        this.formData.region = checkedValue;
      },
      closeTypePicker() {
        this.$refs.typePicker._close();
      },
      // 打开行政区划选择器
      changeOpenTypePicker() {
        this.$refs.typePicker._open();
      },
      calculateTextWidth(text) {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        context.font = "16px Arial";
        return context.measureText(text).width;
      },
      onTabClick(tab) {
        console.log("Tab clicked:", tab);
        if (tab && tab.index >= 0 && tab.index < this.carsDataDetails.length) {
          this.activeTab = this.carsDataDetails[tab.index].id;
        } else {
          console.error("Invalid tab index:", tab);
        }
      },
      submitForm() {
        if (this.activeTab === 'item3') {
          uni.navigateTo({
            url: "/pages/hub_ygzw/supervision/messagePushInfo",
          });
          return;
        } else if (this.activeTab === 'item4') {
          uni.navigateTo({
            url: "/pages/hub_ygzw/supervision/processingRecordsInfo",
          });
          return;
        }
      },
    },
  };
</script>

<style scoped lang="scss">
    .container {
        padding: 10px;
        background: #f3f6fa;
        height: 100vh;
    }

    .form-content {
        background-color: #ffffff;
        padding: 0;
        /* 去掉 padding */
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .form-item {
        padding: 0 10px;
        border-bottom: 1px solid #f1f1f1;
        /* 设置下边框 */
        /* 设置下边框 */
        ::v-deep .u-border,
        .up-border {
            border: none !important;
        }
    }

    .custom-input {
        border: none;
        /* 去掉输入框的边框 */
        background-color: transparent;
        /* 使背景透明 */
    }

    //tab切换栏样式
    .up-tabs-content {
        margin-bottom: 20px;
    }

    .btn-container {
        margin-top: 30px;
        text-align: center;
        position: absolute;
        right: 0;
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;

        ::v-deep .u-button--info[data-v-461e713c] {
            width: 100%;
            background-color: #2877ff;
            color: #ffffff;
        }
    }
</style>
